<template>
  <div>
    <el-form
      ref="forgetForm"
      :model="forForm"
      :rules="forRules"
    >
      <el-row style="font-size: 18px">
        输入需要找回的账号注册时的<span style="color: #409EFF">电话号码</span>
      </el-row>
      <el-form-item prop="phone" style="margin-top: 15px">
        <el-input v-model="forForm.phone" type="text" autocomplete="off" placeholder="注册时的电话号码">
          <span slot="prepend">
            <i class="el-icon-mobile-phone" style="font-size: 15px" />电话号码
          </span>
        </el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" style="width: 100%" @click="nextStep">下一步</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { validateUsername } from '@/utils/validate-tools'

export default {
  name: 'ForgetOne',
  data() {
    return {
      forForm: {
        phone: ''
      },
      forRules: {
        phone: [{ require: true, trigger: 'blur', validator: validateUsername }]
      }
    }
  },
  methods: {
    nextStep() {
      this.$emit('stepChangeEvent', 2)
      this.$refs.forgetForm.resetFields()
    },
    clearAllData() {
      this.$refs.forgetForm.resetFields()
    }
  }
}
</script>

<style scoped>
</style>
